<!DOCTYPE html>
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>

    <div th:replace="fragments/header :: header-meta"/>

    <div th:replace="fragments/header :: header-css"/>

    <title> <span th:utext="#{support}" th:remove="tag"></span> - <span th:utext="#{title}" th:remove="tag"></span> · <span th:utext="#{slogan}" th:remove="tag"></span></title>

    <!--测试用，上线之时应该注释掉-->
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">-->
    <!--<link rel="stylesheet" href="//at.alicdn.com/t/font_761687_dmeuhcj8d3i.css"/>-->
    <!--<link href="/css/float.css" media="all" rel="stylesheet" type="text/css">-->

</head>
<body>

    <div id="app">

        <div id="header">
            <div th:replace="fragments/header :: header-light"/>
        </div>

        <main class="container" style="margin-top: 150px; margin-bottom: 100px; min-height: 1000px;">

            <!--TODO: 支持后台配置背景颜色值、图片等-->
            <div class="row" style="width: 40%; margin-left: 30%; height: 100px;">
                <el-input placeholder="请输入内容" v-model="searchContent" clearable>
                    <el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
                </el-input>
            </div>

            <div class="row" style="margin-top: 50px;">

                <!--TODO: 如果类别数量<=2则为2列，否则分为3列-->
                <div v-if="isTwoColumn" style="width: 100%;">

                    <div class="row" style="margin-bottom: 30px; height: 50px;" v-for="i in Math.ceil(categories.length / 2)">
                        <div class="col-md-6" v-for="category in categories.slice((i - 1) * 2, i * 2)">
                            <el-button style="width: 100%; height: 100%;" @click="gotoCategoryUrl(category.cid)">{{ category.name }}</el-button>
                        </div>
                    </div>
                </div>

                <div v-if="!isTwoColumn" style="width: 100%;">

                    <div class="row" style="margin-bottom: 30px; height: 50px;" v-for="i in Math.ceil(categories.length / 3)">
                        <div class="col-md-4" v-for="category in categories.slice((i - 1) * 3, i * 3)">
                          <el-button style="width: 100%; height: 100%;" @click="gotoCategoryUrl(category.cid)">{{ category.name }}</el-button>
                        </div>
                    </div>
                </div>

            </div>

            <div v-if="showRecommends" class="row" style="margin-top: 50px;">
                <h3 style="width: 100%; text-align: center; margin-bottom: 30px;">推荐文档</h3>
                <div v-for="article in recommends" :key="article.id" style="width: 100%;">
                    <span><a :href="formatArticleUrl(article.aid)" target="_blank">{{ article.title }}</a></span>
                    <span style="float: right; font-size: 14px; color: gray; font-weight: lighter;">文章创建于 {{ formatDate(article.createdAt) }}</span>
                    <hr>
                </div>
            </div>

            <div class="row" style="margin-top: 50px;">
                <h3 style="width: 100%; text-align: center; margin-bottom: 30px;">最新发布</h3>
                <div v-for="article in articles.content" :key="article.id" style="width: 100%;">
                    <span><a :href="formatArticleUrl(article.aid)" target="_blank">{{ article.title }}</a></span>
                    <span style="float: right; font-size: 14px; color: gray; font-weight: lighter;">文章创建于 {{ formatDate(article.createdAt) }}</span>
                    <hr>
                </div>
                <div class="row" style="width: 100%;">
                    <el-pagination style="margin-left: calc(100% - 80px);"
                                   layout="prev, pager, next"
                                   small
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-size="pageSize"
                                   :total="articles.totalElements">
                    </el-pagination>
                </div>
            </div>

        </main>

    </div>

    <div th:replace="fragments/footer :: footer-div"/>

    <div th:replace="fragments/footer :: footer-js"/>

    <!--本地测试代码-->
    <!--<div th:replace="fragments/float :: footer-chat"/>-->

    <!--客服上线代码 -->
    <div th:replace="fragments/footer :: footer-chat"/>

    <script type="text/javascript">
        // axios.defaults.baseURL = "/visitor/api/";
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    currentPage: 1,
                    pageSize: 20,
                    uid: "",
                    searchContent: "",
                    categories: [],
                    recommends: [],
                    articles: []
                }
            },
            computed: {
                showRecommends() {
                    return this.recommends.length > 0;
                },
                isTwoColumn() {
                    if (this.categories.length <= 2)  {
                        return true;
                    }
                    return false;
                }
            },
            methods: {
                getUrlParam(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                    if (r != null) return decodeURIComponent(r[2]);
                    return null; //返回参数值
                },
                handleSearch() {
                    window.open("/support/search?uid=" + this.uid + "&content=" + this.searchContent);
                },
                gotoCategoryUrl(cid) {
                    window.open("/support/category?uid="+ this.uid +"&cid=" + cid);
                },
                formatArticleUrl(aid) {
                    return "/support/article?uid="+ this.uid +"&aid=" + aid;
                },
                formatDate(datetime) {
                    return moment(datetime).format('MM-DD HH:mm')
                },
                handleCurrentChange (val) {
                    // console.log(val);
                    this.currentPage = val;
                    this.getArticles();
                },
                getCategories() {
                    axios.get('/visitor/api/categories', {
                        params:{
                            "uid": this.uid,
                            "page": this.currentPage - 1,
                            "size": 20
                        }
                    })
                    .then(function (response) {
                        console.log("fetch categories success:",response.data);
                        // app.categories = response.data.data
                        let categories = response.data.data
                        for (let i = 0; i < categories.length; i++) {
                            let category = categories[i]
                            if (category.type === 'support') {
                                app.categories.push(category)
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log("fetch categories error:",error);
                    });
                },
                // getRecommend() {
                //     axios.get('/visitor/api/articles', {
                //         params:{
                //             "uid": this.uid,
                //             "page": this.currentPage - 1,
                //             "size": 20
                //         }
                //     })
                //     .then(function (response) {
                //         console.log("fetch articles success:",response.data);
                //         app.articles = response.data.data
                //     })
                //     .catch(function (error) {
                //         console.log("fetch articles error:",error);
                //     });
                // },
                getArticles() {
                    axios.get('/visitor/api/articles', {
                        params:{
                            "uid": this.uid,
                            "page": this.currentPage - 1,
                            "size": 20
                        }
                    })
                    .then(function (response) {
                        console.log("fetch articles success:",response.data);
                        app.articles = response.data.data;
                        for (let i = 0; i < app.articles.content.length; i++) {
                            if (app.articles.content[i].recommend) {
                                app.recommends.push(app.articles.content[i])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log("fetch articles error:",error);
                    });
                }
            },
            created() {
                this.uid = this.getUrlParam('uid');
                console.log('created, uid :', this.uid)
            },
            mounted() {
                this.getCategories()
                this.getArticles()
            }
        })
    </script>

</body>
</html>
